<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>28-css过渡+动画-作业1</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			section{
				width:600px;
				height:300px;
				background:#ccc;
				margin:50px auto;
			}
			section div{
				float:left;
				position:relative;
				width:198px;
				height:298px;
				border:1px solid #ccc;
			}
			section div .circular{
				position:absolute;
				bottom:50px;
				left:75px;
				width:50px;
				height:50px;
				background:pink;
				border-radius:50%;
				animation:circularbox .5s ease infinite;
			}
			section div .Ellipse{
				position:absolute;
				bottom:25px;
				left:75px;
				width:50px;
				height:25px;
				background:green;
				border-radius:50%;
				animation:Ellipse .5s ease infinite;
			}
			section div:nth-child(2) .Ellipse{
				position:absolute;
				bottom:25px;
				left:75px;
				width:50px;
				height:25px;
				background:green;
				border-radius:50%;
				animation:Ellipse2 .5s ease infinite;
			}
			section div:nth-child(3) .Ellipse{
				position:absolute;
				bottom:25px;
				left:75px;
				width:50px;
				height:25px;
				background:#ccc;
				border-radius:50%;
				animation:Ellipse3 .5s ease infinite;
			}
			section div:nth-child(2) .circular{
				background:green;
			}
			section div:nth-child(3) .circular{
				background:#111;
			}
			@keyframes circularbox{
				0%{
					margin-bottom:0;
				}
				45%{
					margin-bottom:150px;	
				}
				100%{
					margin-bottom:0;
				}
			}
			@keyframes Ellipse{
				0%{
					background:yellow;
				}
				45%{
					background:pink;
				}
				100%{
					background:yellow;
				}
			}
			@keyframes Ellipse2{
				0%{
					background:green;
				}
				45%{
					background:yellow;
				}
				100%{
					background:green;
				}
			}
			@keyframes Ellipse3{
				0%{
					background:#111;
				}
				45%{
					background:yellow;
				}
				100%{
					background:#111;
				}
			}
		</style>
	</head>
	<body>
		
		<section>
			<div>
					<div class="circular"></div>
					<div class="Ellipse"></div>
			</div>
			<div>
					<div class="circular"></div>
					<div class="Ellipse"></div>
			</div>
			<div>
					<div class="circular"></div>
					<div class="Ellipse"></div>
			</div
		</section>
		
		
		
	</body>
</html>
